<template>
	<view>
		<view class="bg-bottom-pink padding radius-bottom-xl">
			<view class="titleNview-placing"></view>
			<view class="flex justify-between align-center">
				<view class="flex align-end">
					<image class="portrait" :src="userPicture"></image>
					<view class="padding-tb-xs padding-left text-white">
						<view class="text-bold" style="width: 350rpx;">{{ userNick }}</view>
						<view class="flex margin-top-sm">
							<view class="line-white solid radius-l padding-xs" @tap="copyInviteCode">邀请码：{{ user.inviteCode }}</view>
							<view class="padding-xs padding-left-sm" @tap="copyInviteCodeLink"><icon-font type="copy" size="18" color="#ffffff"></icon-font></view>
						</view>
					</view>
				</view>
				<navigator hover-class="none" url="setting"><icon-font type="go" size="20" color="#ffffff"></icon-font></navigator>
			</view>
			<view style="height: 100rpx;"></view>
		</view>
		<view class="to-top">
			<view class="card-section bg-white radius-l shadow margin-lr">
				<navigator class="card-item" hover-class="none" url="team">
					<view class="item-content">
						<view>
							<view class="title">我的团队</view>
							<view class="title-ex">团队成员</view>
						</view>
						<view><icon-font type="team" size="34" color="#DC623F" /></view>
					</view>
				</navigator>
				<navigator class="card-item" hover-class="none" url="inviteFriend">
					<view class="item-content">
						<view>
							<view class="title">邀请好友</view>
							<view class="title-ex">分享赚钱</view>
						</view>
						<view><icon-font type="friends" size="34" color="#24A4ED" /></view>
					</view>
				</navigator>
				<view class="card-item">
					<view class="item-content" @tap="TBRelation">
						<view>
							<view class="title">淘宝授权</view>
							<view class="title-ex">{{ relationText }}</view>
						</view>
						<view><icon-font type="taobao" size="34" color="#FE7B07" /></view>
					</view>
				</view>
				<view class="card-item">
					<view class="item-content" @tap="setwechat">
						<view>
							<view class="title">微信绑定</view>
							<view class="title-ex">{{ wechat }}</view>
						</view>
						<view><icon-font type="weixin" size="34" color="#07C160" /></view>
					</view>
				</view>
			</view>
			<view class="margin-top cu-list menu">
				<navigator class="cu-item arrow" hover-class="none" url="withdraw">
					<view class="content">
						<icon-font type="tixian" size="24" color="#FE7179" />
						<text class="padding-left-sm">提现账户设置</text>
					</view>
					<text class="text-gray text-sm">设置</text>
				</navigator>
				<view class="cu-item arrow" @tap="showModal">
					<view class="content">
						<icon-font type="jiesuan" size="24" color="#FAA923" />
						<text class="padding-left-sm">结算方式</text>
					</view>
					<text class="text-gray text-sm">{{ rateCurrencyText }}</text>
				</view>
			</view>
			<view class="cu-list menu">
				<navigator class="cu-item arrow" hover-class="none" url="collectedList">
					<view class="content">
						<icon-font type="collected" size="24" color="#e83844" />
						<text class="padding-left-sm">我的收藏</text>
					</view>
				</navigator>
			</view>
			<view class="cu-list menu">
				<!-- <navigator class="cu-item arrow" hover-class="none" url="safety">
					<view class="content">
						<icon-font type="anquan" size="24" color="#558E1A" />
						<text class="padding-left-sm">安全设置</text>
					</view>
					<text class="text-gray text-sm">设置</text>
				</navigator> -->
				<!-- #ifdef APP-PLUS -->
				<view class="cu-item arrow" @tap="clearCache">
					<view class="content">
						<icon-font type="huancun" size="24" color="#f37b1d" />
						<text class="padding-left-sm">清除缓存</text>
					</view>
					<text class="text-gray text-sm">{{ cacheSize }}</text>
				</view>
				<!-- #endif -->
				<navigator class="cu-item arrow" hover-class="none" url="aboutus">
					<view class="content">
						<icon-font type="about" size="24" color="#D03032" />
						<text class="padding-left-sm">关于</text>
					</view>
				</navigator>
			</view>
			<view class="margin-tb flex justify-center"><button class="cu-btn lg bg-red" style="width: 60%;" @tap="loginOut">退出登录</button></view>
		</view>
		<!-- 结算币种设置 -->
		<view class="cu-modal bottom-modal" :class="typeFlg ? 'show' : ''" @tap="hideModal">
			<view class="cu-dialog bg-white" @tap.stop="">
				<view class="padding flex justify-center solid-bottom" v-for="(item, index) in currencyList" :key="index" v-if="!$store.state.checkMode||index==0" @tap="selectRateCurrency(index)">{{ item.name }}</view>
			</view>
		</view>
		<dialog-box :modalName="modalName" @cancelExit="cancelExit" @exitLogin="exitLogin"></dialog-box>
		<loading :loadModal="loadModal"></loading>
		<tab-bar :current="4"></tab-bar>
	</view>
</template>
<script>
import tabBar from '../../components/tab-bar.vue';
var _self; //this容器
export default {
	components: {
		tabBar
	},
	data() {
		return {
			user: {},
			currencyList: [
				{
					id:'CNY',
					name:'人民币'
				},
				{
					id:'BTC',
					name:'BTC'
				},
				{
					id:'ETH',
					name:'ETH'
				}
			],
			rateCurrency: '',
			wechat: '未绑定',
			cacheSize: '0B',
			loadModal: false,
			typeFlg: false, //提现设置底部弹窗
			info: '',
			modalName:'',//对话框
		};
	},
	onLoad() {
		_self = this;
		uni.hideTabBar();
		
		//微信绑定修改监听
		_self.$onFire.on('wechatListener', function(value) {
			_self.changeWechat(value);
		});

		//结算方式
		_self.getRateCurrency();

		/* 计算缓存 */
		//#ifdef APP-PLUS
		plus.cache.calculate(function(size) {
			if (size < 1024) {
				_self.cacheSize = size + 'B';
			} else if (cacheSize / 1024 >= 1 && size / 1024 / 1024 < 1) {
				_self.cacheSize = Math.floor(size / 1024100) / 100 + 'KB';
			} else if (size / 1024 / 1024 >= 1) {
				_self.cacheSize = Math.floor(size / 1024 / 1024100) / 100 + 'M';
			}
		});
		//#endif
	},
	onShow() {
		_self.user = _self.$util.getUserStorage();
		if (_self.user) {
			_self.wechat = _self.user.wechat == null ? '未绑定' : '已绑定';
		}
	},
	computed: {
		userNick() {
			return this.user.nick ? this.user.nick : '木有昵称';
		},
		userPicture() {
			return this.user.userPicture ? this.user.userPicture : '../../static/missing-face.png';
		},
		rateCurrencyText() {
			return this.rateCurrency == 'CNY' ? '人民币' : this.rateCurrency;
		},
		relationText() {
			return this.user.relationId ? '已授权' : '未授权';
		}
	},
	methods: {
		/* 显示结算方式对话框 */
		showModal() {
			_self.typeFlg = true;
		},
		/* 隐藏结算方式对话框 */
		hideModal() {
			_self.typeFlg = false;
		},
		/* 设置结算方式 */
		selectRateCurrency(index) {
			_self.rateCurrency = _self.currencyList[index].id;
			const param = {
				userRateCurrency: _self.rateCurrency
			};
			_self.hideModal();
			_self.loadModal = true;
			_self.$http.httpRequest('userRebate/setUserRateCurrency', param, true).then(res => {
				_self.loadModal = false;
				if (!res._tranStatus) {
					_self.$util.msg(res._exceptionLocalizedMessage);
				}
			});
		},

		/* 获取结算方式 */
		getRateCurrency() {
			_self.$http.httpRequest('userRebate/userId', null, true).then(res => {
				if (res._tranStatus) {
					_self.rateCurrency = res._data.userRateCurrency;
				}
			});
		},

		TBRelation() {
			//淘宝授权
			_self.$util.ExistRelationId();
		},

		/* 清除缓存 */
		clearCache() {
			//#ifdef APP-PLUS
			plus.cache.clear(function() {
				_self.cacheSize = '0B';
				_self.$util.msg('清除成功');
			});
			//#endif
		},
		

		/* 退出登录 */
		loginOut() {
			_self.modalName="exitlogin";
		},
		cancelExit() {
			//取消退出登录
			_self.modalName="";
		},
		exitLogin() {
			//确认退出登录
			_self.modalName="";
			_self.$util.clearUserStorage();
			uni.reLaunch({
				url: '/pages/index/main',
			});
		},

		//复制邀请码
		copyInviteCode() {
			uni.setClipboardData({
				data: _self.user.inviteCode
			});
		},
		
		//复制邀请链接
		copyInviteCodeLink(){
			uni.setClipboardData({
				data:_self.user.inviteCodeUrl
			});
		},

		/* 绑定微信 */
		setwechat() {
			let wc = _self.user.wechat == null ? '' : _self.user.wechat;
			uni.navigateTo({
				url: 'settingWechat?cnt=' + encodeURIComponent(wc)
			});
		},
		/* 按监听返回值重新设置微信绑定状态 */
		changeWechat(value) {
			_self.wechat = '已绑定';
		}
	},
	onHide() {
		this.typeFlg = false;
	},
	onUnload() {
		this.$onFire.off();
	}
};
</script>
<style lang="scss">
.to-top {
	position: relative;
	top: -80rpx;
	z-index: 1001;
}
.titleNview-placing {
	height: var(--status-bar-height);
	box-sizing: content-box;
}
.card-section {
	display: flex;
	flex-wrap: wrap;
	padding: 20rpx 30rpx;
	background: #fff;
	.card-item {
		display: flex;
		flex-direction: column;
		width: 45%;
		height: 120rpx;
		margin: 10rpx;
		padding: 10rpx;
		border-radius: 10rpx;
		border: 1rpx solid #878787;
		.item-content {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 100%;
			.title {
				margin-bottom: 10rpx;
			}
			.title-ex {
				color: #aaaaaa;
				font-size: 24rpx;
			}
		}
	}
}

.portrait {
	width: 130rpx;
	height: 130rpx;
	border: 5rpx solid #fff;
	border-radius: 50%;
}
.tag-btn {
	font-size: 28rpx;
	vertical-align: middle;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 15px;
	height: 48rpx;
	font-family: Helvetica Neue, Helvetica, sans-serif;
	white-space: nowrap;
	border-radius: 1000rpx;
	background-color: #ffffff;
	color: #000000;
}
</style>
